<template>
  <div class="post">
    <div class="post-header">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="form" :rules="rules">
        <el-form-item label="" prop="feedstatus">
          <el-select v-model="formInline.feedstatus" placeholder="入住状态">
            <el-option label="已入住" value="1"></el-option>
            <el-option label="未入住" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="username">
          <el-input v-model="formInline.username" placeholder="单元名称"></el-input>
        </el-form-item>
        <el-form-item label="" prop="value">
          <el-date-picker v-model="formInline.value" type="daterange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="" prop="feedtext">
          <el-input v-model="formInline.feedtext" placeholder="幢号"></el-input>
        </el-form-item>
        <el-form-item label="" prop="feedresult">
          <el-input v-model="formInline.feedresult" placeholder="房号"></el-input>
        </el-form-item>
        <el-form-item label="" prop="homename">
          <el-input v-model="formInline.homename" placeholder="住客姓名"></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
          <el-button type="success" class="el-icon-upload2" @click="onSubmit(1)">批量导出</el-button>
          <el-button type="danger" @click="onSubmit(2)" class="el-icon-delete">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="post-main">
      <div class="main-con">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column type="index" width="55" label="序号">
          </el-table-column>
          <el-table-column prop="username" label="单元名称" width="180">
            <template slot-scope="scope">
              <span v-if="scope.row.username==null">暂无</span>
              <span v-else>{{ scope.row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="feedtext" label="幢号">
            <template slot-scope="scope">
              <span v-if="scope.row.feedtext==null">暂无</span>
              <span v-else>{{ scope.row.feedtext }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="storeynum" label="楼层号">
            <template slot-scope="scope">
              <span v-if="scope.row.storeynum==null">暂无</span>
              <span v-else>{{ scope.row.storeynum }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="feedresult" label="房号">
            <template slot-scope="scope">
              <span v-if="scope.row.feedresult==null">暂无</span>
              <span v-else>{{ scope.row.feedresult }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="homename" label="住客姓名">
            <template slot-scope="scope">
              <span v-if="scope.row.homename==null">暂无</span>
              <span v-else>{{ scope.row.homename }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="feedstatus" label="状态">
            <!-- 插槽 -->
            <template slot-scope="scope">
              <div v-if="scope.row.feedstatus == 1">已入住</div>
              <div v-else>未入住</div>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <!-- 
                  scope.row:当前行信息
                  scope.#index:当前点击的下标
                  -->
              <el-button size="mini" @click="handleView(scope.row)" class="xqbut">编辑</el-button>
              <el-button size="mini" @click="handleDel(scope.row, scope.$index)" class="gdbut">删除</el-button>

            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="iPagination.currentPage" :page-sizes="iPagination.pageSizes" :page-size="iPagination.pageSize"
          layout="total, sizes, prev, pager, next" :total="iPagination.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ids: "",
      iPagination: {
        // 默认选中哪一页
        currentPage: 1,
        // 定义每列有多少条列表
        pageSizes: [5, 10, 20, 50, 100],
        // 默认定义每页多少条
        pageSize: 10,
        // 定义总条数
        total: null,
        // // 页码
        // page:1,
        // // 每页多少条
        // rows:10,
      },
      formInline: {
        username: '',
        feedstatus: "",
        feedtext: "",
        feedresult: "",
        value: ["", ""],
      },
      tableData: [],
      ruleForm: {
        communityname: "",
        unitnum: "",
        username: "",
        createtime: "",
        feedtext: "",
        feedresult: "",
        homename: "",
      },
      rules: {
        comName: [
          // required 必填 message：消息提示 trigger：失去焦点的时候触发
          { required: true, message: '请输入发布小区', trigger: 'blur' },
        ],
        time: [
          { required: true, message: '请输入单元名称', trigger: 'blur' },
        ],
        username: [
          { required: true, message: '请输入内容', trigger: 'blur' },
        ],

      },
      // m默认隐藏
      dialogFormVisible: false,
      time: ""
    }
  },
  methods: {
    // 渲染数据
    handleServe() {
      this.$Axios({
        url: '/poster/getFeedBack',
        method: 'get',
        data: {
          username: this.formInline.username,
          feedtext: this.formInline.feedtext,
          startDate: this.formInline.value[0],
          endDate: this.formInline.value[1],
          feedresult: this.formInline.feedresult,
          feedstatus: this.formInline.feedstatus,
          currPage: this.iPagination.currentPage - 1,
          pageNum: this.iPagination.pageSize,
        },
        success: (result) => {
          this.tableData = result.data
          console.log(this.tableData, 11);
          this.iPagination.total = result.total;
        }
      })
    },
    // 查询
    search() {
      this.$axiosToken({
        url: '/poster/getFeedBack',
        method: 'get',
        data: {
          username: this.formInline.username,
          feedtext: this.formInline.feedtext,
          startDate: this.formInline.value[0],
          endDate: this.formInline.value[1],
          feedresult: this.formInline.feedresult,
          feedstatus: this.formInline.feedstatus,
          currPage: this.iPagination.currentPage - 1,
          pageNum: this.iPagination.pageSize,
        },
        success: (result) => {
          this.tableData = result.data
          setTimeout(() => {
            this.loading = false;
          }, 100)
        }
      })
    },
    // 分页器
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.iPagination.pageSize = val
      this.handleServe()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.iPagination.currentPage = val
      this.handleServe()
    }
  },
  mounted() {
    this.handleServe()
  }
}
</script>
<style lang="scss" scoped>
.post::v-deep {
  .el-button{
    border-color:#ccc;
  }
  .xqbut{
    color: #62a8ea;
    &:hover{
      border-color: #62a8ea;
      background: unset;
    }
  }
  .gdbut{
    border-color: #fbc4c4;
    &:hover{
      border-color: #f56c6c;
      background: unset;
      color: unset;
    }
  }
  .el-form {
    display: flex;
    justify-content: space-between;

    .el-form-item {
      margin-bottom: 0;
      width: 18%;

      &:nth-child(6) {
        width: 26%;
        text-align: right;
        margin-right: 0;
      }

      .el-form-item__content {
        width: 100%;

        .el-input {
          width: 100%;
        }

        .el-select {
          width: 100%;
        }

        input {
          height: 36px;
          font-size: 14px;
        }

        button {
          &:first-child {
            width: 25%;
            // margin-left: 30px;
          }

          width: 34%;
          font-size: 14px;
        }
      }
    }
  }

  .post-main {

    // border: 1px solid #ccc;
    // padding: 10px;
    // margin-top: 10px;
    .main-con {
      margin-top: 20px;

      .el-table {

        th,
        td {
          font-size: 14px;
          text-align: center;
        }


        .has-gutter {
          tr {
            background: #eef1f6;
          }

          .el-table__cell {
            background: #eef1f6;
            border-right: 1px solid #c2c2c28a;
            font-size: 14px;
            font-weight: 600;
            color: #000000c0;
          }
        }
      }
    }

    .el-pagination {
      text-align: right;
    }
  }

  .mtk {
    .el-form {
      .el-form-item {
        display: inline-block;
        margin-bottom: 0;
        // width: 46%;

        .el-input {
          width: unset;
        }

        &:first-child {
          width: 46%;
          margin-right: 20px;

          .el-input {
            width: 78%;
          }
        }

        &:nth-child(2) {
          width: 46%;

          .el-input {
            width: 78%;
          }
        }

        &:nth-child(3) {
          // width: 30%;
          display: block;

          .el-input {
            width: 100%;
          }
        }

        &:nth-child(4) {
          // width: 30%;
          display: block;

          .el-input {
            width: 100%;
          }
        }


        .el-form-item__label {
          padding: unset;
        }

        .el-form-item__content {
          width: 100%;

          // display: inline-block;
          input {
            height: 36px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
